


import React, { Component } from 'react'
import { Layout, Tag, Avatar, Button, Dropdown, Menu, Modal } from "antd"
import { withRouter } from "react-router-dom"
import {MenuUnfoldOutlined,MenuFoldOutlined,UserOutlined,LogoutOutlined,DownOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
import "./index.scss"
import mobxdata from "../../mobx/data"
import { observer } from "mobx-react"
import { roleList } from '../../utils'
import { connect } from "react-redux"
import { changecollapsed } from '../../redux/actions'
import { ajax } from "../../api"
import { baseURL } from '../../api/ajax'
const { Header } = Layout


@connect(
    state => {
        return {
            title: state.getIn(['data', 'title']),
            collapsed: state.getIn(['data', 'collapsed']),
        }
    }
)
@withRouter
@observer
class MyHead extends Component {
    toggle = () => {
        this.props.dispatch(changecollapsed(!this.props.collapsed))
    }
    handleLagout = () => {
        Modal.confirm({
            title: 'Confirm',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要退出登录吗?',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                console.log(this.props)
                this.props.history.push("/login")
                mobxdata.resetuserinfo()  
                localStorage.removeItem('token')
            }
        });
    }
    uploadFile=()=>{
        this.file.click()
    }
    startSendFile=()=>{
        console.log("send-File")
        var file = this.file.files[0]
        console.log(file)
        var data = new FormData()
        data.append("avatar",file)

        ajax.uploadavatar(data)
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo({
                    avatar:res.avatar
                })
            }
        })

    }
    
    render() {
        const {userinfo} = mobxdata
        return (
            <Header style={{ background: "#fff", width: '100%' }}>
                <div className="head-box">
                    <p>
                        {React.createElement(this.props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </p>
                    <marquee behavior="" direction="">
                        {this.props.title}
                    </marquee>
                    {
                        userinfo.username && <div className="head-right">
                            <Dropdown style={{ margin: "0 5px" }} overlay={
                                <Menu>
                                    <Menu.Item onClick={()=>this.props.history.push('/main/mine')} >个人信息</Menu.Item>
                                    <Menu.Item onClick={()=>this.props.history.push('/main/updatePwd')} danger>修改密码</Menu.Item>
                                </Menu>
                            }>
                                <span style={{ margin: "0 5px" }}> {userinfo.username} <DownOutlined /> </span>
                            </Dropdown>
                            <input type="file" onChange={this.startSendFile} ref={el=>this.file=el} style={{display:'none'}}  />
                            <Tag style={{ margin: "0 5px" }} color={roleList.find(item => item.role == userinfo.role).color}> {roleList.find(item => item.role == userinfo.role).title}  </Tag>
                            {
                                userinfo.avatar ?
                                    <Avatar onClick={this.uploadFile}  style={{ margin: "0 5px" }} style={{ backgroundColor: '#87d068' }} src={userinfo.avatar.replace(/public/,baseURL)} />
                                    :
                                    <Avatar onClick={this.uploadFile} style={{ margin: "0 5px" }} style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                            }
                            <Button style={{ margin: "0 5px" }} type="danger" size="mini"
                                shape="circle" icon={<LogoutOutlined />}
                                onClick={this.handleLagout}
                            ></Button>
                        </div>
                    }
                </div>
            </Header>
        )
    }
}

export default MyHead